<!DOCTYPE html>
<html ng-app="OptionApp">
<head>
    <title>ng-select</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
</head>
<body >
<div class="container">
    <div ng-include="'../common/header.html'"></div>
    <table class="table">
        <caption class="code">ngOptions(optional) – {comprehension_expression=}</caption>
        <tbody><tr>
            <th>名称</th>
            <th>说明</th>
        </tr>
        <tr>
            <td rowspan="4"><code class="code">for</code><code class="code">array</code><code class="code">data</code><code class="code">sources</code></td>
            <td><code class="code">label</code><code class="code">for</code><code class="code">value</code><code class="code">in</code><code class="code">array</code></td>
        </tr>
        <tr>
            <td><code class="code">select</code><code class="code">as</code><code class="code">label</code><code class="code">for</code><code class="code">value</code><code class="code">in</code><code class="code">array</code></td>
        </tr>
        <tr>
            <td><code class="code">label</code><code class="code">group</code><code class="code">by</code><code class="code">group</code><code class="code">for</code><code class="code">value</code><code class="code">in</code><code class="code">array</code></td>
        </tr>
        <tr>
            <td><code class="code">select</code><code class="code">as</code><code class="code">label</code><code class="code">group</code><code class="code">by</code><code class="code">group</code><code class="code">for</code><code class="code">value</code><code class="code">in</code><code class="code">array</code></td>
        </tr>
        <tr>
            <td rowspan="4"><code class="code">for</code><code class="code">object</code><code class="code">data</code><code class="code">sources</code></td>
            <td><code class="code">label</code><code class="code">for</code>(<code class="code">key</code>,<code class="code">value</code>)<code class="code">in</code><code class="code">object</code></td>
        </tr>
        <tr>
            <td><code class="code">select</code><code class="code">as</code><code class="code">label</code><code class="code">for</code>(<code class="code">key</code>,<code class="code">value</code>)<code class="code">in</code><code class="code">object</code></td>
        </tr>
        <tr>
            <td><code class="code">label</code><code class="code">group</code><code class="code">by</code><code class="code">group</code><code class="code">for</code>(<code class="code">key</code>,<code class="code">value</code>)<code class="code">in</code><code class="code">object</code></td>
        </tr>
        <tr>
            <td><code class="code">select</code><code class="code">as</code><code class="code">label</code><code class="code">group</code><code class="code">by</code><code class="code">group</code><code class="code">for</code>(<code class="code">key</code>,<code class="code">value</code>)<code class="code">in</code><code class="code">object</code></td>
        </tr>
        <tr>
            <td>where</td>
            <td>
                <ul>
                    <li>array / object : an expression which evaluates to an array / object to iterate over.</li>
                    <li>value : local variable which will refer to each item in the array or each property value of object during iteration.</li>
                    <li>key : local variable which will refer to a property name in object during iteration.</li>
                    <li>label : The result of this expression will be the label for <option value=" element. The expression will most likely refer to the value variable (e.g. value.propertyName )."> element. The expression will most likely refer to the value variable (e.g. value.propertyName ).</option></li>
                    <li>select : The result of this expression will be bound to the model of the parent &lt;select&gt; element. If not specified, select expression will default to value.</li>
                    <li>group : The result of this expression will be used to group options using the &lt;optgroup&gt; DOM element.</li>
                </ul>
            </td>
        </tr>
        </tbody></table>
    如下是具体示例：
    <div ng-controller="OptionCtrl">
        <select ng-model="selected" ng-options="a.name for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>，结果：{{selected}}
        <br>
        <br>
        <br>
        <select ng-model="selected" ng-options="(a.name + '爱吃' + a.food) for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>，结果：{{selected}}
        <br>
        <br>
        <br>
        <select ng-model="selected" ng-options="(a.name + '的爱好是' + a.favor) group by a.sex for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>
    </div>
    <br>
    <br>
    <br>
    <div ng-controller="OptionCtrl">
        <select ng-model="seletedId" ng-options="a.id as a.name for a in animals">
            <option value="">请选择你的萌宠</option>
        </select>
        <span ng-show="seletedId">自定义选择的ID为：{{ seletedId }}</span>
    </div>
</div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
    var app = angular.module('OptionApp', []);
    app.controller('OptionCtrl', ['$scope', function($scope){
        $scope.selected = '请选择';
        $scope.animals = [
            {
                id: '00001',
                name: '猫',
                sex: '雌',
                food: '鱼',
                favor: '玩球'
            },
            {
                id: '00002',
                name: '狗',
                sex: '雄',
                food: '骨头',
                favor: '接盘子'
            },
            {
                id: '00003',
                name: '兔',
                sex: '雌',
                food: '胡萝卜',
                favor: '刨洞'
            },
            {
                id: '00004',
                name: '狮',
                sex: '雄',
                food: '肉',
                favor: '猎物'
            }
        ];
    }]);

</script>






